<template>
  <van-row class="mobile-profile">
    <van-row class="top">
      <van-col span="12">
        <van-cell @click="showGame = !showGame" :title="memberInfo.games[gameCode]" is-link arrow-direction="down" />
      </van-col>
      <van-col span="12">
        <van-cell @click="showDate = true" :title="pickDate|formatDate" is-link arrow-direction="down" />
      </van-col>
    </van-row>

    <van-row class="games" v-if="memberInfo && showGame">
      <van-col v-for="(title,code) in memberInfo.games" :key="`memberInfoGames${code}`" span="8">
        <div @click="(gameCode = code) && (showGame = false)" class="item"> {{title}} </div>
      </van-col>
    </van-row>

    <van-popup v-model="showDate" position="bottom">
      <van-datetime-picker v-model="pickDate" type="date" @confirm="pickerConfirm" @cancel="pickerCancel" />
    </van-popup>

    <van-row class="list" v-if="list">

      <van-row class="head">
        <van-col span="5">期数</van-col>
        <van-col span="5">时间</van-col>
        <van-col span="3">号码</van-col>
        <van-col span="3">大小</van-col>
        <van-col span="3">单双</van-col>
        <van-col span="5">亚冠/龙虎</van-col>
      </van-row>

      <van-row v-for="index in 20" :key="index" class="item">
        <van-col span="5">345423</van-col>
        <van-col span="5">12:15</van-col>
        <van-col span="14">1234567890</van-col>
      </van-row>

    </van-row>
  </van-row>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment' // utils
  import { Row, Col, DatetimePicker, Popup, Cell } from 'vant'

  export default {
    components: {
      [Row.name]: Row,
      [Col.name]: Col,
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup,
      [Cell.name]: Cell,
    },

    computed: {
      ...mapGetters(['memberGameSelected', 'memberGames', 'memberInfo']),
      list() {
        if (this.gameCode) {
          return this.memberInfo.commissions[this.gameCode]
            ? Object.values(this.memberInfo.commissions[this.gameCode])
            : []
        }
      },
    },

    data() {
      return {
        loading: false,
        gameCode: null,
        activePanName: [],
        showDate: false,
        showGame: false,
        pickDate: new Date(),
      }
    },

    // 数据格式化
    filters: {
      formatDate(date) {
        return moment(date).format('YYYY-MM-DD')
      },
    },

    created() {
      if (this.memberInfo) {
        this.gameCode = Object.keys(this.memberInfo.commissions)[0]
      }
    },

    methods: {
      pickerConfirm() {
        this.showDate = false
      },
      pickerCancel() {
        this.showDate = false
      },
    },
    watch: {},
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import 'src/styles/variables.scss';

  .mobile-profile {
    text-align: center;
    .top {
      .van-col:first-of-type {
        border-right: 1px solid $bgc;
      }
    }
    .games {
      .item {
        @extend .bg;
        font-size: 14px;
        padding: 10px 0;
      }
    }

    .list {
      .head {
        background-color: #fff;
        padding: 8px 0;
        margin-top: 5px;
        font-size: 13px;
      }
      .item {
        background-color: #fff;
        padding: 10px 0;
        font-size: 15px;
      }
    }
  }
</style>